    <script setup>
    import { queryStudenApi } from '@/api/stu';
    import { ref, onMounted } from 'vue'


    //定义搜索框查询的数据模型
    const searchStudent = ref({
        name: '',
        degree: '',
        clazzId: ''
    })



    /* 分页条 */
    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref(0);


    /* 分页条相关函数 */
    const handleSizeChange = (val) => {
        search();
    }
    const handleCurrentChange = (val) => {
        search();
    }



    //定义空数组，用来接收前端发送的数据
    const studentList = ref([]);

    //定义钩子函数，用来初始页面展示数据
    onMounted(() => {
        search();
    });

    //清除方法
    const clear = () => {
        searchStudent.value = {
            name: '',
            degree: '',
            clazzId: ''
        },
        search();

    }


    //查询方法
    const search = async () => {
        const result = await queryStudenApi(searchStudent.value.name,
            searchStudent.value.degree,
            searchStudent.value.clazzId,
            currentPage.value,
            pageSize.value
        );

        if (result.code) {
            studentList.value = result.data.rows;
            total.value = result.data.total;
        }

    }


    //添加学生
    const add = ()=>{

    }

    //删除学生
    const deleteById = ()=>{
        
    }




    </script>

    <template>
        <!-- ========== 表单组件 ========== -->
        <el-form :inline="true" :model="searchStudent" class="demo-form-inline">

            <!-- 姓名搜索 -->
            <el-form-item label="姓名">
                <el-input v-model="searchStudent.name" placeholder="请输入学生姓名" clearable />
            </el-form-item>

            <!-- 学历搜索 -->
            <el-form-item label="最高学历">
                <el-select v-model="searchStudent.degree" placeholder="请选择" clearable>
                    <el-option label="初中" value="1" />
                    <el-option label="高中" value="2" />
                    <el-option label="大专" value="3" />
                    <el-option label="大学" value="4" />
                    <el-option label="硕士" value="5" />
                    <el-option label="博士" value="6" />
                </el-select>
            </el-form-item>

            <!-- 所属班级 -->
            <el-form-item label="所属班级">
                <el-select v-model="searchStudent.clazzId" placeholder="请选择" clearable>
                    <el-option label="Java1班" value="1" />
                    <el-option label="Java2班" value="2" />
                    <el-option label="Java3班" value="3" />
                    <el-option label="Java4班" value="4" />
                    <el-option label="Java5班" value="5" />
                    <el-option label="Java6班" value="6" />
                </el-select>
            </el-form-item>

            <!-- 查询、清空按钮 -->
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="info" @click="clear">清空</el-button>
            </el-form-item>
        </el-form>


        <!-- ========== 表格组件 ========== -->
        <div id="header">
            <el-button type="primary" @click="add">+ 添加学员</el-button>
            <el-button type="danger" @click="deleteByIds">- 批量删除</el-button>
        </div><br>



        <!-- 表格 -->
        <el-table :data="studentList" border style="width: 100%">

            <el-table-column type="selection" width="55" align="center" />
            <el-table-column prop="name" label="姓名" width="100" align="center" />
            <el-table-column prop="no" label="学号" width="120" align="center" />
            <el-table-column prop="clazzName" label="班级" width="180" align="center" >
            </el-table-column>
            <el-table-column prop="gender" label="性别" width="80" align="center" >
                <template #default="scope">
                    {{ scope.row.gender==1? '男':'女' }}
                </template>
                
            </el-table-column>
            <el-table-column prop="phone" label="手机号" width="150" align="center" />

            <el-table-column prop="degree" label="最高学历" width="90" align="center">

                <template #default="scope">
                    <span v-if="scope.row.degree==1">初中</span>
                    <span v-else-if="scope.row.degree==2">高中</span>
                    <span v-else-if="scope.row.degree==3">大专</span>
                    <span v-else-if="scope.row.degree==4">本科</span>
                    <span v-else-if="scope.row.degree==5">硕士</span>
                    <span v-else-if="scope.row.degree==6">博士</span>
                    <span v-else>其他</span>
                </template>

            </el-table-column>
            <el-table-column prop="violationCount" label="违纪次数" width="90" align="center" />
            <el-table-column prop="violationScore" label="违纪扣分" width="90" align="center" />
            <el-table-column prop="updateTime" label="最后修改时间" align="center" />
            <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button type="primary" size="small" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="primary" size="small" @click="deleteById(scope.row.id)">违纪</el-button>
        <el-button type="danger" size="small" @click="deleteById(scope.row.id)">删除</el-button>
      </template>
    </el-table-column><br>
        </el-table>

        <!-- ========== 分页条 ========== -->
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
            :page-sizes="[5, 10, 20, 30, 40, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    </template>



    <style scoped></style>